<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="forgetPassWord">
        <!-- <div class="forget"></div> -->
        <div class="container a-container pass-one" id="a-container">
            <form class="form" id="b-form" method="" action="">
                <h2 class="form_title title">找回密码</h2>
                <span class="form__span">or use your email account</span>
                <input class="form__input showQuestion" type="text" placeholder="">
                <input class="form__input shuRuPassWord" type="question" placeholder="答案">
                <button class="form__button button submit setNewPass">确定</button>
            </form>
        </div>
        <div class="container a-container pass-two" id="a-container">
            <form class="form" id="b-form" method="" action="">
                <h2 class="form_title title">找回密码</h2>
                <span class="form__span">or use your email account</span>
                <input class="form__input newPassword" type="password" placeholder="请输入新密码">
                <input class="form__input rePassword" type="password" placeholder="请再次输入密码">
                <button class="form__button button submit changePass">修改</button>
            </form>
        </div>
    </div>
    <div class="main">
        <div class="container a-container" id="a-container">
            <form class="form" id="b-form" method="" action="">
                <h2 class="form_title title">登录</h2>
                <span class="form__span">or use your email account</span>
                <input class="form__input userName" type="text" placeholder="Username">
                <input class="form__input passWord " type="password" placeholder="Password">
                <a class="form__link getBackPass" href="javascript:void(0)">忘记密码?</a>
                <button class="form__button button submit">登录</button>
            </form>
        </div>
        <div class="container b-container" id="b-container">

            <form class="form" id="a-form" method="" action="">
                <h2 class="form_title title">注册</h2>
                <span class="form__span">or use email for registration</span>
                <input class="form__input Username" type="text" placeholder="Username">
                <input class="form__input Password" type="password" placeholder="Password">
                <input class="form__input Email" type="email" placeholder="Email">
                <input class="form__input phoneNumber" type="number" placeholder="Phone">
                <select class="form__input form-control Question">
                    <option value="" selected:disabled style="display:none">Set One Question</option>
                    <option value="父亲的姓名">父亲的姓名</option>
                    <option value="母亲的姓名">母亲的姓名</option>
                    <option value="最好的朋友">最好的朋友</option>
                    <option value="喜欢的电影">喜欢的电影</option>
                </select>
                <input class="form__input Answer" type="text" placeholder="Answer">
                <button class="switch__button form__button  button " type="button">注册</button>
            </form>
        </div>
        <div class="switch" id="switch-cnt">
            <div class="switch__circle"></div>
            <div class="switch__circle switch__circle--t"></div>
            <div class="switch__container" id="switch-c1">
                <h2 class="switch__title title">Hello Friend !</h2>
                <p class="switch__description description">Enter your personal details and start journey with us</p>
                <button class="switch__button button switch-btn">注册</button>
            </div>
            <div class="switch__container is-hidden" id="switch-c2">
                <h2 class="switch__title title">Welcome Back !</h2>
                <p class="switch__description description">To keep connected with us please login with your personal
                    info</p>
                <button class="switch__button button switch-btn">登录</button>
            </div>
        </div>
    </div>
    <script src="./js/script.js" type="text/javascript"></script>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/url.js"></script>
    <script>
        // console.log(localStorage.username)
        // let userUrl = 'http://g5jqkt.natappfree.cc/shopping/user'
        // 登录和注册
        $('.form__button').click(function (e) {
            //登录
            if ($(this)[0].innerText === '登录') {
                let userName = $('.userName').val()
                let passWord = $('.passWord').val()
                console.log(userName, passWord)
                if (userName === '') {
                    alert('用户名不能为空')
                    return 0;
                }
                else {
                    if (passWord === '') {
                        alert('密码不能为空')
                        return 0;
                    }
                    else {
                        $.ajax({
                            type: "POST",
                            url: userUrl,
                            xhrFields: { withCredentials: true },
                            data: { 'username': userName, 'password': passWord, 'type': 'login' },
                            dataType: "json",
                            success: function (res) {
                                console.log(res)
                                // console.log(res.data.username)
                                if (res.status === 0) {
                                    localStorage.username = res.data.username
                                    console.log('登录成功')
                                    window.location.href = 'index.html';
                                } else if (res.status === 100) {
                                    alert('密码错误')
                                } else if (res.status === 101) {
                                    alert('用户名不存在')
                                }
                            },
                            error: function () {
                                console.log("错误")
                            }
                        })
                    }
                }
            }
            // 注册
            else if ($(this)[0].innerText === '注册') {
                let Username = $('.Username').val()
                let Password = $('.Password').val()
                let Email = $('.Email').val()
                let phoneNumber = $('.phoneNumber').val()
                let Question = $('.Question')[0].value
                let Answer = $('.Answer').val()
                console.log(Username, Password, Email, phoneNumber, Question, Answer)
                if (Username === '') {
                    alert('请输入用户名')
                } else {
                    if (Password === '') {
                        alert('请输入密码')
                    } else {
                        if (Email === '') {
                            alert('请输入邮箱')
                        } else {
                            if (phoneNumber === '') {
                                alert('请输入电话号码')
                            } else {
                                if (Question === '') {
                                    alert('请选择密保问题')
                                } else {
                                    if (Answer === '') {
                                        alert('请填写问题答案')
                                    } else {
                                        $.ajax({
                                            url: userUrl,
                                            // url: "http://localhost:8080/shopping/user",
                                            type: "POST",
                                            dataType: "json",
                                            data: {
                                                'username': Username,
                                                'password': Password,
                                                'email': Email,
                                                'phone': phoneNumber,
                                                'question': Question,
                                                'answer': Answer,
                                                'type': 'register'
                                            },
                                            success: function (data) {
                                                if (data.status === 0) {
                                                    console.log('注册成功')
                                                    alert('恭喜，注册成功')
                                                    location.reload();
                                                }
                                            },
                                            error: function () {
                                                console.log('出现错误')
                                            }
                                        });
                                    }

                                }
                            }
                        }
                    }
                }

            }
        })
        // 用户名失去焦点查看是否重复
        $('.Username').blur(function () {
            let Username = $(this).val()
            if (Username) {
                $.ajax({
                    type: 'POST',
                    url: userUrl,
                    // url: 'http://localhost:8080/shopping/user',
                    xhrFields: { withCredentials: true },
                    data: { 'username': Username, 'type': 'check_valid', 'box_type': 'username' },
                    dataType: 'json',
                    success: function (res) {
                        console.log(res)
                        if (res.status === 0) {
                            console.log('用户名合法')
                        } else {
                            alert('用户名已存在')
                        }
                    },
                    error: function () {
                        console.log('错误')
                    }
                })
            }
            else {
                alert('请输入用户名')
            }
        })
        // 邮箱失去焦点查看是否重复
        $('.Email').blur(function () {
            let Email = $(this).val()
            if (Email) {
                $.ajax({
                    type: 'POST',
                    url: userUrl,
                    xhrFields: { withCredentials: true },
                    data: { 'email': Email, 'box_type': 'email', 'type': 'check_valid' },
                    dataType: 'json',
                    success: function (res) {
                        if (res.status === 0) {
                            console.log('邮箱通过')
                        }
                        else {
                            alert('邮箱已存在')
                        }
                    },
                    error: function () {
                        console.log('错误')
                    }
                })
            }
            else {
                alert('请输入邮箱')
            }
        })
        //点击忘记密码输入密保问题
        $('.getBackPass').click(function () {
            let userName = $('.userName').val()
            console.log(userName)
            if (userName === '') {
                alert('请输入正确的用户名')
                return 0;
            } else {
                $('.forgetPassWord').css('display', 'block')
                $.ajax({
                    type: "POST",
                    url: userUrl,
                    xhrFields: { withCredentials: true },
                    data: { 'username': userName, 'type': 'forget_get_question' },
                    dataType: "json",
                    success: function (res) {
                        // 返回的问题添加到input里边
                        if (res.status === 0) {
                            console.log('用户的问题是：' + res.data)
                            $('.showQuestion').val(res.data)
                        } else if (res.status === 100) {
                            console.log('该用户未设置找回密码问题')
                            $('.showQuestion').val('该用户未设置找回密码问题')
                        }
                    },
                    error: function () {
                        console.log("错误")
                    }
                })
            }
            //验证问题答案是否正确
            let jump = 0;
            $('.shuRuPassWord').blur(function () {
                let Question = $('.showQuestion').val()
                let answer = $(this).val()
                if (answer === '') {
                    return 0
                }
                console.log(answer, userName, Question)
                $.ajax({
                    type: "POST",
                    url: userUrl,
                    xhrFields: { withCredentials: true },
                    data: { 'answer': answer, 'username': userName, 'question': Question, 'type': 'forget_check_answer' },
                    dataType: "json",
                    success: function (res) {
                        console.log(res.status)
                        if (res.status === 0) {
                            jump = 1
                        }
                        // else {
                        //     alert('问题回答错误')
                        // }
                    },
                    error: function () {
                        console.log("错误")
                    }
                })
            })
            //无密保问题重置密码
            function resetPass() {
                $('.pass-one').css('display', 'none')
                $('.pass-two').css('display', 'block')
                $('.changePass').click(function () {
                    let newPass = $('.newPassword').val()
                    let rePass = $('.rePassword').val()
                    if (newPass === '') {
                        alert('新密码不能为空')
                        return 0
                    } else {
                        if (rePass === '') {
                            alert('请再次输入新密码')
                        } else {
                            if (newPass !== rePass) {
                                alert('两次密码输入不一致')
                            } else {
                                $.ajax({
                                    type: "POST",
                                    url: userUrl,
                                    xhrFields: { withCredentials: true },
                                    data: { 'passwordNew': newPass, 'username': userName, 'type': 'forget_reset_password' },
                                    dataType: "json",
                                    success: function (res) {
                                        // 修改成功跳回登录界面
                                        console.log(res.status)
                                        if (res.status === 0) {
                                            $('.pass-one').css('display', 'block')
                                            $('.pass-two').css('display', 'none')
                                            $('.forgetPassWord').css('display', 'none')
                                        } else if (res.status === 100) {
                                            alert('修改失败')
                                        }
                                    },
                                    error: function () {
                                        console.log('失败')
                                    }
                                })
                            }

                        }
                    }
                })
            }
            //有密保问题重置密码
            $('.setNewPass').click(function () {
                if (jump === 0) {
                    alert('请输入正确的答案')
                    return 0
                } else {
                    $('.pass-one').css('display', 'none')
                    $('.pass-two').css('display', 'block')
                    let newPassword = $('.pass-one').val()
                    $('.changePass').click(function () {
                        let newPass = $('.newPassword').val()
                        let rePass = $('.rePassword').val()
                        if (newPass === '') {
                            alert('新密码不能为空')
                            return 0
                        } else {
                            if (rePass === '') {
                                alert('请再次输入新密码')
                            } else {
                                if (newPass !== rePass) {
                                    alert('两次密码输入不一致')
                                } else {
                                    $.ajax({
                                        type: "POST",
                                        url: userUrl,
                                        xhrFields: { withCredentials: true },
                                        data: { 'passwordNew': newPass, 'username': userName, 'type': 'forget_reset_password' },
                                        dataType: "json",
                                        success: function (res) {
                                            // 修改成功跳回登录界面
                                            console.log(res.status)
                                            if (res.status === 0) {
                                                $('.pass-one').css('display', 'block')
                                                $('.pass-two').css('display', 'none')
                                                $('.forgetPassWord').css('display', 'none')
                                            } else if (res.status === 100) {
                                                alert('修改失败')
                                                $('.pass-one').css('display', 'block')
                                                $('.pass-two').css('display', 'none')
                                                $('.forgetPassWord').css('display', 'none')
                                            }
                                        },
                                        error: function () {

                                        }
                                    })
                                }

                            }
                        }
                    })
                }

            })
        })
        function clear() {
            $('.shuRuPassWord').val('')
            $('.newPassword').val('')
            $('.rePassword').val('')
            $('.pass-one').css('.display', 'block')
            $('.pass-two').css('.display', 'none')


        }
        $('.forgetPassWord').click(function (e) {
            if (e.target.className === 'forgetPassWord') {
                clear()
                $('.forgetPassWord').css('display', 'none')
            }
        })
    </script>
</body>

</html>